<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>
        <script type="text/javascript">
            $(function(){
                //css选择器
                //取li中的所有a
                //$("li a").css("color","#f00");
                
                //取class为.myList这个标签的下一级标签li的下一级标签为a的节点
                //> 下一级
                //$(".myList > li >a").css("color","#c00");
                
                //取li的节点其中li的href属性是以http://开头的
//                $("a[href^='http://']").css("background","#00f")
//                        .css("color","#fff");
                
                //取myList中ul中的li有a标签的li标签
//                 $(".myList ul li:has('a')").css("background","#ff0");

                //过去页面中所有以pdf结尾的超级链接
//                $("a[href$='pdf']").css("background","#ff0")
//                        .css("color","#f00")
                
                //E+F 匹配前面是临近兄弟节点e的所有元素f（E和F紧挨着）
                //取id为li1的下一个兄弟节点li，仅仅只会去一个节点,(相邻节点)
                //如果不是相邻节点什么都取不出来
//                $("#li1+li").css("background","#ff0");
                
                //取id为li1的下面所有满足条件的兄弟节点
                //$("#li1~li").css("background","#ff0");
                
                //页面中最先匹配的某个元素
                //alert($("li:first").html());
                
                //页面中最后匹配的某个元素
                //alert($("li:last").html());
                
                //li中最先的子元素
                //获取满足要求的第一个li 
                //$(".myList>li li:first-child").css("background","#f00");
                
                //获取没有兄弟节点的ul
                alert($("ul:only-child").length);
                
                
                
            });
                
                
        </script>
    </head>
    <body>
        <ul class="myList">
            <li>
                <a href="http://jquery.com">Jquery Site</a>
                <ul>
                    <li><a href="css1.txt" title="mycss">CSS1</a></li>
                    <li id="li1"><a href="css2.pdf" title="css2">CSS2</a></li>
                    <li><a href="css3.html" title="this is my">CSS3</a></li>
                    <li>Basic Xpath</li>
                </ul>
            </li>
            <li>Jquery also supports
                <ul>
                    <li>Custom selectors</li>
                    <li>Form selectors</li>
                </ul>
            </li>
        </ul>
    </body>
</html>
